<template>
  <div class="bim-content">
    <bim.BimBox></bim.BimBox>
    <div id="map" class="map"></div>
  </div>
</template>
<script setup lang="ts">
import { Bim, bos3dV1 } from "easybos3d";
import { resize } from "easybos3d/src/plugins/resize/resize";
import { onMounted, ref, h, defineComponent, nextTick } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import * as THREE from "three";

const bim = new Bim();

const init = async () => {};
init();
// bim.use(resize({
//   designDraftHeight: 1080,
//   designDraftWidth: 1920
// }))
onMounted(() => {});
bim.DATABASEKEY = "sf7919b8ccc64734be98361f828026e1";
bim.addView(["M1720764782250"]).setColorModelsKeyAndComponentsKeyTogether([
  {
    models: [
      {
        modelsKey: "M1720764782250",
        color: "#FFFFF",
      },
    ],
    components: [
      {
        componentsKey: "M1720764782250_4093126",
        color: "red",
      },
    ],
  },
]);
bim.use({
  async install(Bim) {
    let AMap = await AMapLoader.load({
      key: "aaee6782d5a06534249f06458d9954eb", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        "AMap.Geocoder",
        "AMap.ElasticMarker",
        "AMap.MouseTool",
        "AMap.RectangleEditor",
        "AMap.CircleEditor",
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    });
    let map = new AMap.Map("map", {
      zoom: 14,
      zooms: [2, 20],
      center: [116.54, 39.79], //地图中心点坐标
      viewMode: "3D",
      pitch: 50,
    });
    var data = map.customCoords.lngLatsToCoords([[116.52, 39.79]]);
    bim.onModelMounted(() => {
      let M = Bim.viewer3D.getModelMatrix("M1720764782250") as THREE.Matrix4;

      // 创建一个Vector3对象来存储缩放值
      let scale = new THREE.Vector3();
      // 创建一个Quaternion对象来存储旋转值
      let rotation = new THREE.Quaternion();
      rotation.setFromRotationMatrix(M);
      scale.setFromMatrixScale(M);
      /**
       * 复制模型对应信息
       */
      /**
       * 求复合矩阵
       */
      console.log(data);

      const position = new THREE.Vector3();
      position.set(data[0][0], data[0][1], 0);
      scale.set(0.001, 0.001, 0.001);
      rotation.set(0, 0, 0, 1)
      const m3 = new THREE.Matrix4().compose(position, rotation, scale);
      
      bim.viewer3D.setModelMatrix("M1720764782250", m3);
      console.log(m3, scale);
    });

    let customCoords = map.customCoords;
    const scene = Bim.viewer3D.viewerImpl.getScene();
    let camera = Bim.viewer3D.viewerImpl.camera;
    let renderer = Bim.viewer3D.viewerImpl.getRenderer();
    console.log(Bim.viewer3D);
    bim.el.value.style.display= 'none'
    let customLayer = new AMap.CustomLayer(renderer.domElement, {
      zIndex: 10,
      render: () => {
        renderer.resetState();
        customCoords.setCenter([116.52, 39.79]);
        const { near, far, fov, position, up, lookAt } =
          customCoords.getCameraParams();

        // 这里的顺序不能颠倒，否则可能会出现绘制卡顿的效果。
        camera.near = near;
        camera.far = far;
        camera.fov = fov;

        camera.position.set(...position);
        camera.up.set(...up);
        camera.lookAt(...lookAt);
        camera.updateProjectionMatrix();
        renderer.render(scene, camera);
        renderer.resetState();
      },
      alwaysRender: true,
    });
    map.add(customLayer);
  },
});
</script>
<style>
.bim-content {
  width: 100vw;
  height: 100vh;
}
.map {
  width: 100%;
  height: 100%;
}
</style>
